const modalChildBehavior = require('../../../behaviors/modalChildBehavior');
Component({
  properties: {
    title: {
      type: String
    },
    showCancel: {
      type: Boolean,
      value: true
    },
    cancelText: {
      type: String,
      value: '取消'
    },
    sureText: {
      type: String,
      value: '确定'
    },
    inputModalShow: {
      type: Boolean,
      value: false,
      observer: '_modalStatusChange'
    }
  },
  behaviors: [ modalChildBehavior ],
  data: {
    animationData: {},
    shapeAnimationData: {}
  },
  methods: {
    onSure: function () {
      this.triggerEvent('onSure', this.inputText);
      this.showModal('hide');
    },
    onCancel: function () {
      this.triggerEvent('onCancel');
      this.showModal('hide');
    },
    onInput: function (e) {
      this.inputText = e.detail.value;
    },
    modalOption: function (e) {
      let status = e.currentTarget.dataset.status;
      this.showModal(status);
    },
    showModal: function (status) {
      this.inputText = '';
      var animation = wx.createAnimation({
        timingFunction: 'linear',
        duration: 200
      })
      var shapeAnimation = wx.createAnimation({
        timingFunction: 'linear',
        duration: 200
      })

      this.animation = animation;

      animation.opacity(1).translate('-50%', '-50%').step();
      shapeAnimation.opacity(.5).step();
      this.setData({
        animationData: animation.export(),
        shapeAnimationData: shapeAnimation.export()
      })
      if (status === 'hide') {
        animation.opacity(0).step();
        shapeAnimation.opacity(0).step();
        this.setData({  
          animationData: animation.export(),
          shapeAnimationData: shapeAnimation.export()
        })
        setTimeout(() => {
          this.setDataSmart({
            inputModalShow: false
          })
        }, 200);
      }
      
      if (status === 'show') {
        this.setDataSmart({  
          inputModalShow: true  
        });
      }
      
    },
    _modalStatusChange: function (newValue) {

      newValue === true ? this.showModal('show') : this.showModal('hide');
      
    }
  }
})